<template>
	<view>
		<view class="whole" v-if="yaoshang==0">
			<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
			<text>暂无数据</text>
		</view>
		<view class="wholes" v-if="yaoshang!=0">
			<view class="varietyOfDishes" :class="{varietyOfDishess:Width<=400}" v-for="(items,indexd) in yaoshang"
				:key="indexd">
				<view class="top" :class="{tops:Width<=400}">
					<image class="image_people" :class="{image_peoples:Width<=400}" src="/static/image/speaker.png"
						mode="aspectFit"></image>
					<view class="name" :class="{names:Width<=400}">
						<view class="view_name">
							<text class="text_name" :class="{text_names:Width<=400}">{{items.name}}</text>
						</view>
						<view class="view_xn">
							<text class="text_xn" :class="{text_xns:Width<=400}">先生\女士您好!</text>
						</view>
					</view>
					<view class="text_cp" :class="{text_cps:Width<=400}">
						<text>本次点餐菜品</text>
					</view>
				</view>
				<view class="Chargeback" v-if="items.details.length==0">
					<text>已全部退单!</text>
				</view>
				<view v-if="items.details.length!=0">
					<view class="center_cm" :class="{center_cms:Width<=400}" v-for="(item,index) in items.details "
						:key="index">
						<view class="cm__red" :class="{cm__reds:Width<=400}" v-if="item.status==1">
							<text class="text" :class="{texts:Width<=400}">{{item.dishName}}</text>
							<text class="text2" :class="{text2s:Width<=400}">{{item.labProd}}</text>
						</view>
						<view class="cm" :class="{cms:Width<=400}" v-if="item.status==0">
							<text class="text" :class="{texts:Width<=400}">{{item.dishName}}</text>
						</view>
					</view>
					<view class="tips" :class="{tipss:Width<=400}">
						<text>膳食顾问提醒您:</text>
						<view class="tips_text" :class="{tips_texts:Width<=400}" v-if="items.status==0">
							<text>您本次点餐的菜品</text>
							<text class="proposal" :class="{proposals:Width<=400}">符合您的健康</text>
							<text>要求，祝您用餐愉快！</text>
						</view>
						<view class="tips_text_red" :class="{tips_text_reds:Width<=400}" v-if="items.status==1">
							<text>您本次点餐的菜品有 </text>
							<text class="proposal_red" :class="{proposal_reds:Width<=400}">{{items.dietLabProds}}</text>
							<text>的食物会严重影响您的健康,请谨慎食用!</text>
						</view>
						<view class="tips_text_rint">
							<text>{{items.time}}</text>
						</view>
					</view>
					<view v-if="items.display==true" class="confirm" :class="{confirms:Width<=400}">
						<view @click="confirmNo(items,indexd)" :class="{confirmNos:Width<=400}" class="confirmNo">
							<text>去换点别的</text>
						</view>
						<view @click="confirm(items,indexd)" :class="{confirmYess:Width<=400}" class="confirmYes">
							<text>我就想吃这些</text>
						</view>
					</view>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Width: '',
				yaoshang: [],
				yaoshangs: [],
				dataCode: [],
				indexd: '',
				dataName: '', //控制结算台层级的文字
			}
		},
		onLoad: function(option) {
			// #ifdef APP-PLUS
			const utilModule = uni.requireNativePlugin("WT-ScreenModule")
			console.log(utilModule.mScreen())
			// #endif

			this.dataCode = option.dataCode
			this.dataName = option.dataName
			this.onSocketMessage()
			this.getWidth()
			uni.setNavigationBarTitle({
				title: this.dataName
			});

		},
		onUnload() {
			const utilModule = uni.requireNativePlugin("WT-ScreenModule")

			console.log(utilModule.stop())
			// #ifdef APP-PLUS
			// 锁定屏幕方向
			plus.screen.lockOrientation('portrait-primary');
			// #endif
		},
		methods: {
			parentFun(item, detailss) {
				for (var indexd = 0; indexd < this.yaoshang.length; indexd++) {
					if (this.yaoshang[indexd].id == item.id) {
						for (var i = 0; i < this.yaoshang[indexd].details.length; i++) {
							// 严格比较，即类型与数值必须同时相等。
							for (var j = 0; j < detailss.length; j++) {
								console.log(this.yaoshang[indexd].details[i].id === detailss[j].id)
								if (this.yaoshang[indexd].details[i].id === detailss[j].id) {
									this.yaoshang[indexd].details.splice(i, 1);
								}
							}
						}
					}
				}


				// this.yaoshang[this.indexd].status="0"
				// item.status="0"
				uni.removeStorageSync('yaoshang' + this.dataCode)
				// this.yaoshang.splice(indexd, 1)
				uni.setStorageSync('yaoshang' + this.dataCode, this.yaoshang);
			},
			//去换点别的
			async confirmNo(items, indexd) {
				this.indexd = indexd
				let itemss = encodeURIComponent(JSON.stringify(items));
				uni.navigateTo({
					url: '/pages/callThePolice/menuAlarm/Chargeback?dataCode=' + itemss
				})
				// const res = await this.$ssgwRequest({
				// 	url: '/api-baiyun/cardConsume/cancelOrder/'+items.seq,
				// 	method: "post",
				// 	data: {
				// 		// seq:items.seq
				// 	}
				// })
				// if (res.success == true) {
				// 	// this.yaoshang[indexd].status=1
				// 	items.status="0"
				// 	// console.log(res)
				// 	uni.removeStorageSync('yaoshang' + this.dataCode)
				// 	// this.yaoshang.splice(indexd, 1)
				// 	uni.setStorageSync('yaoshang' + this.dataCode, this.yaoshang);
				// 	uni.showToast({
				// 		title: '您已确认',
				// 		duration: 2000
				// 	});
				// }
			},
			// 我想吃这些
			async confirm(items, indexd) {
				console.log(items)
				const res = await this.$ssgwRequest({
					url: '/api-baiyun/healthNotify/notify/',
					method: "post",
					data: items
				})
				if (res.success == true) {
					// this.yaoshang[indexd].status=1
					items.display = false
					console.log('您已确认：' + res)
					uni.removeStorageSync('yaoshang' + this.dataCode)
					// this.yaoshang.splice(indexd, 1)
					uni.setStorageSync('yaoshang' + this.dataCode, this.yaoshang);
					uni.showToast({
						title: '您已确认',
						duration: 2000
					});
				}
			},
			//获取屏幕宽度
			getWidth() {
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.Width = res.windowWidth;
					},
				});
				console.log(that.Width)
			},
			onSocketMessage() {
				uni.onSocketMessage(res => {
					const data = JSON.parse(res.data)
					if (data.code == "99") {
						if (data.hasOwnProperty("msg")) {
							if (data.msg != 'ping') {
								getApp().globalData.getSocketMsg(res.data);
								if (data.msgType == "com.rabbitMQ.DirectMessListener.health.notice") {
									const msg = JSON.parse(data.msg)
									// console.log('干饭的详细信息: '+JSON.stringify(msg));
									msg['display'] = true
									// console.log(msg.name)
									if (this.yaoshangs == null) { //非空验证
										this.yaoshangs = []
									}
									if (this.yaoshangs.length == 4) {
										this.yaoshangs.shift();
										msg["time"] = data.time
										this.yaoshangs[3] = msg
									} else {
										msg["time"] = data.time
										this.yaoshangs.push(msg)
									}
									var yaoshang = []
									// 如果是一楼结算台
									if (this.dataName === '一楼结算台' && msg.term === 107) {
										// console.log('一楼结算台107: ' + msg.term);
										for (let i = 0; i < this.yaoshangs.length; i++) { // 这里将1楼和2楼的push进去
											yaoshang[i] = this.yaoshangs[this.yaoshangs.length - i - 1]
										}
										this.yaoshang = yaoshang
									}
									//如果是二楼结算台
									if (this.dataName === '二楼结算台' && msg.term === 100) {
										// console.log('二楼结算台100: ' + msg.term);
										for (let i = 0; i < this.yaoshangs.length; i++) { // 这里将1楼和2楼的push进去
											yaoshang[i] = this.yaoshangs[this.yaoshangs.length - i - 1]
										}
										this.yaoshang = yaoshang
									}
									
									// 没有区分一楼和二楼的区别前
									// for (let i = 0; i < this.yaoshangs.length; i++) { // 这里将1楼和2楼的push进去
									// 	yaoshang[i] = this.yaoshangs[this.yaoshangs.length - i - 1]
									// }
									// this.yaoshang = yaoshang

									// this.yaoshang =yaoshangs.reverse()
								}
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.whole {
		text-align: center;
		font-size: 60rpx;
		color: #959595;

		.image {
			margin: 320rpx 0 50rpx 0;
			width: 100%;
			height: 350rpx;
		}
	}

	.wholes {
		// background:url(../../../static/image/yanshang.png);
		// height: 100vh;
		// background-repeat: no-repeat;
		// background-size: 100%;
		display: flex;
		// flex: 1;
		flex-wrap: wrap;
		text-align: center;
		justify-content: flex-start;
		// flex-direction: row;
		padding-bottom: 5%;
		// background-color: #109EF8;
	}

	.varietyOfDishes {
		margin: 5% 2.5% 0 2.5%;
		width: 45%;
		// height: 400rpx;
		border-radius: 10px;
		padding-top: 20rpx;
		background-color: #FFFFFF;
	}

	.top {
		margin: 0 5%;
		width: 90%;
		padding-bottom: 2%;
		line-height: auto;
		// height: 50rpx;
		// background-color: #2B85E4;
		border-bottom: 1px solid #B8B8B8;
		display: flex;

		.image_people {
			width: 40rpx;
			height: 40rpx;
		}

		.name {
			margin-top: 1%;
			line-height: 1em;
			display: flex;
			width: 75%;
			text-align: center;

			.view_name {
				// width: 30%;
				margin-left: 2%;

				.text_name {
					font-size: 15px;
				}
			}

			.view_xn {
				margin-left: 2%;
				// text-align: left;
				line-height: 1em;

				.text_xn {
					// margin:0 5rpx;
					// line-height: 0.2em;
					font-size: 12px;
				}
			}

		}

		.text_cp {
			margin-top: 1%;
			width: 35%;
			line-height: 1em;
			// width: 120rpx;
			text-align: right;

			text {
				font-size: 13px;
			}
		}
	}

	.center_cm {
		display: flex;
		// flex-wrap: wrap;
		text-align: center;
		flex-wrap: nowrap;
		justify-content: flex-start;
		// flex-direction: row;
		margin: 2% 5%;
	}

	.cm {
		// display: flex;
		// margin-right: 20rpx;
		border: 1px solid #A6E65F;
		padding: 0 1%;
		border-radius: 4px;
		font-size: 20px;

		.text {}
	}

	.cm__red {
		margin-right: 20rpx;
		padding: 0 5rpx;
		font-size: 20px;

		.text {
			border: 1px solid #ff0000;
			background-color: #ff0000;
			border-radius: 4px;
		}

		.text2 {
			margin-left: 10rpx;
			background-color: #ffaa00;
			border-radius: 4px;
		}
	}

	.tips {
		margin: 0 5% 10% 5%;
		text-align: left;
		font-size: 16px;

		.tips_text {
			.proposal {
				color: #A6E65F;
				margin: 0 2%;
			}
		}

		.tips_text_red {
			.proposal_red {
				color: #ff0000;
				margin: 0 2% 20% 2%;
			}
		}

		.tips_text_rint {
			text-align: right;
			margin: 5% 0 0 0;
		}
	}

	.confirm {
		margin: 0 auto 10% auto;
		width: 90%;
		border-radius: 3px;
		font-size: 0.6em;
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;

		.confirmNo {
			background-color: #109EF8;
			padding: 3% 4%;
			width: 40%;
			height: 40rpx;
			border-radius: 3px;
			line-height: 40rpx;
		}

		.confirmYes {
			background-color: #FFC060;
			width: 40%;
			height: 40rpx;
			padding: 3% 4%;
			border-radius: 3px;
			line-height: 40rpx;
		}
	}

	.varietyOfDishess {
		margin: 5% 5% 0 5%;
		width: 90%;
		// height: 400rpx;
		border-radius: 10px;
		padding-top: 20rpx;
		background-color: #FFFFFF;
	}

	.tops {
		margin: 0 5%;
		width: 90%;
		// height: 120rpx;
		// line-height: 120rpx;
		// background-color: #2B85E4;
		border-bottom: 1px solid #B8B8B8;
		display: flex;

		.image_peoples {
			width: 80rpx;
			height: 80rpx;
		}

		.names {
			margin-top: 5%;

			// width: 65%;
			.view_name {
				margin-left: 3%;

				.text_names {
					font-size: 20px;
				}

			}

			.view_xn {
				margin-left: 2%;
				line-height: 1em;

				.text_xns {
					margin-left: 5rpx;
					font-size: 10px;
				}

			}

		}

		.text_cps {
			margin-top: 5%;
			text-align: right;

			// font-size: 13px;
			text {
				font-size: 13px;
			}
		}
	}

	.center_cms {
		width: auto;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		// justify-content: space-around;
		flex-direction: row;
		margin: 3% 5%;
	}

	.cms {
		margin-right: 20rpx;
		border: 1px solid #A6E65F;
		padding: 0 5rpx;
		border-radius: 4px;
		font-size: 20px;

		.texts {}
	}

	.cm__reds {
		margin-right: 20rpx;

		padding: 0 5rpx;

		font-size: 20px;

		.texts {
			border: 1px solid #ff0000;
			background-color: #ff0000;
			border-radius: 4px;
		}

		.text2s {
			margin-left: 10rpx;
			background-color: #ffaa00;
			border-radius: 4px;
		}
	}

	.tipss {
		margin: 0 5% 5% 5%;
		text-align: left;
		font-size: 13px;

		.tips_texts {
			.proposals {
				color: #A6E65F;
				margin: 0 5rpx;
			}
		}

		.tips_text_reds {
			.proposal_reds {
				color: #ff0000;
				margin: 0 5rpx;
			}
		}
	}

	.confirms {
		width: 90%;
		border-radius: 3px;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;

		.confirmNos {
			background-color: #109EF8;
			padding: 3% 4%;
			width: 40%;
			height: 40rpx;
			border-radius: 3px;
			line-height: 40rpx;
		}

		.confirmYess {
			background-color: #FFC060;
			width: 40%;
			height: 40rpx;
			padding: 3% 4%;
			border-radius: 3px;
			line-height: 40rpx;
		}
	}

	.Chargeback {
		margin: 40rpx 0;
	}
</style>